<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="{{ url_for('index') }}">
          <img alt="Brand" src="{{ url_for('static',filename='img/logo.png') }}">
      </a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
              <span>Notifications</span>
              <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
              <img src="{{ url_for('static',filename='img/avatars/avatar_small.jpg') }}" alt="" class="user-avatar"/>
              <span>{% if g.user.username %}{{ g.user.username }}{% else %}Hello{% endif %}</span>
              <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Logout</a></li>
          </ul>
        </li>
          <li>
              <a href="javascript:void(0);" class="dropdown" id="id_sidebar-opener">
                  <i class="icon-list" style="font-size: 20px;"></i>
              </a>
          </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>